<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>关于我们</title>
    <link rel="stylesheet" href="../关于我们/关于我们.css" />
    <!-- swiper -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper@8/swiper-bundle.css"
    />
    <script src="https://unpkg.com/swiper@8/swiper-bundle.js"></script>
    <!-- vue语法 -->
    <script src="https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js"></script>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <!-- 引入jquery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 加载地图JSAPI脚本 -->
    <!-- <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> -->
  </head>
  <body>
    <div id="demo1">
      <!-- 头部 -->
      <div class="box1-all">
        <div class="box1">
          <img src="../../img/2.png" alt="" />
          <div class="box1-right">
            <img src="../../img/3.png" alt="" />
            <div>咨询我们:12345678900</div>
          </div>
        </div>
      </div>
      <!-- 轮播 -->
      <div class="carousel">
        <div class="carousel-top">
          <div class="one"><a href="../首页/首页.html">首页</a></div>
          <div class="one">
            <a href="../网站开发/网站开发.html">网站开发</a>
          </div>
          <div class="one"><a href="../APP开发/APP开发.html">APP开发</a></div>
          <div class="one">
            <a href="../小程序开发/小程序开发.html">小程序开发</a>
          </div>
          <div class="one"><a href="../案例/案例.html">案例</a></div>
          <div class="one">
            <a href="../关于我们/关于我们.html">关于我们</a>
          </div>
        </div>
        <div class="swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img class="image" src="../../img/1.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img class="image" src="../../img/1.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img class="image" src="../../img/1.png" alt="" />
            </div>
          </div>
          <!--如果需要滚动条-->
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <!-- 关于我们 -->
      <div class="concerning">
        <div class="left">
          <img src="../../img/夜景.png" alt="" />
        </div>
        <div class="right">
          <div>关于我们</div>
          <div>
            我们一直专注于互联网核心技术服务，为企业提供一站技术服务主要业务范围有:小程序开发、微信开发、APP开发、电商系统开发OA管理系统、CAL(人脸识别)开发等互联网+领域。我们致力于为企业提供可靠、稳定的技术研发支持。
          </div>
          <div>
            我们是一支追求品质完美、力求不断超越自己的团队，每一位成员是亲密的伙伴，与公司一起成长发展。我们珍惜每一次合作的机会，来挑战完美、精益求精的团队秉承专业的设计。
          </div>
        </div>
      </div>
      <!-- 企业文化 -->
      <div class="site">
        <div class="industry1">企业文化</div>
        <div class="process-all">
          <div class="process" v-for="item in process" :key="item.id">
            <div class="process1">
              <img class="image1" :src="item.img" alt="Sample Image" />
            </div>
            <div class="process1">
              <img
                class="image2"
                :src="item.img1"
                alt="Image 2"
                style="display: none"
              />
            </div>
            <div class="process2">{{item.text}}</div>
            <div class="process3">{{item.text1}}</div>
          </div>
        </div>
      </div>
      <!-- 666关于我们 -->
      <div class="case">
        <div class="industry1">关于我们</div>
        <div class="bottom-all">
          <div class="bottom" v-for="item in photo" :key="item.id">
            <div class="bottom1">{{item.text}} <sup>+</sup></div>
            <div class="bottom1">{{item.text1}}</div>
          </div>
        </div>
      </div>
      <!-- all -->
      <div class="all1">
        <!-- 留言 -->
        <div class="message">
          <div class="left">
            <div class="all" v-for="item in liuyan" :key="item.id">
              <div>
                <img :src="item.icon" alt="" />
                <div class="size">{{item.text}}</div>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="top">
              <img src="../../img/留言.png" alt="" /> 填写留言
            </div>
            <div class="inp">
              <input type="text" placeholder="姓名：" />
              <input type="text" placeholder="邮箱：" />
              <input type="text" placeholder="电话：" />
            </div>
            <div class="area">
              <textarea name="" id="" cols="30" rows="10"></textarea>
            </div>
            <div class="btn"><button>提交</button></div>
          </div>
        </div>
        <!-- 地图 -->
        <div class="map">
          <div style="padding: 1%">详细地图:</div>
          <iframe
            id="geoPage"
            width="100%"
            height="330px"
            frameborder="0"
            scrolling="no"
            src="https://apis.map.qq.com/tools/poimarker?type=0&marker=coord:36.201159,117.03738; title:山东省泰安市岱岳区环湖路&key=T6SBZ-UIPWG-NGRQV-QYPNV-EVQT6-LZFUQ&referer=myapp"
          >
          </iframe>
        </div>
      </div>
      <!-- 底部 -->
      <div class="below">
        <div class="top">
          <div class="left">
            <div class="change">山东柏瑞设计有限公司</div>
            <div class="change">联系电话:12345678900</div>
            <div class="change">
              地址:济南创新谷2号楼孵化器五楼(长清区海棠路与芙蓉路交叉路口东南)
            </div>
          </div>
          <div class="right">
            <div><img src="../../img/柏瑞.png" alt="" /></div>
            <div>微信公众号</div>
          </div>
        </div>
        <div class="bottom">
          <div>
            Shandong Bairui software Technology Co.
            Ltd.山东柏瑞软件科技有限公司版权所有 鲁ICP备17006298号-1
          </div>
        </div>
      </div>
    </div>
    <!-- 地图 -->
    <!-- <script>
      var map = new AMap.Map("container", {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 11, //初始化地图层级
        center: [116.397428, 39.90923], //初始化地图中心点
      });
    </script> -->
    <script>
      // 鼠标经过变颜色
      $(document).ready(function () {
        $(".process").mouseenter(function () {
          $(this).find(".process1 .image1").css({ display: "none" });
          $(this).find(".process1 .image2").css({ display: "block" });
        });
        $(".process").mouseleave(function () {
          $(this).find(".process1 .image2").css({ display: "none" });
          $(this).find(".process1 .image1").css({ display: "block" });
        });
      });
      // vue实例
      //使用 vue3 的基本格式
      const { createApp, ref } = Vue;
      const demo1 = createApp({
        // 逻辑代码全部写在setup里面
        // 因为没有语法糖，无论是定义的"变量"或者"函数"都必须！
        // 把名称再多写一次！放在在最后return里面
        setup() {
          //测试变量
          // 列表循环
          // 666关于我们循环
          const photo = ref([
            { id: 1, text: "666", text1: "客户的选择" },
            { id: 2, text: "152", text1: "覆盖行业" },
            { id: 3, text: "30", text1: "开发团队人数" },
            { id: 4, text: "63", text1: "口碑好评" },
          ]);
          // 软件开发流程
          const process = ref([
            {
              id: 1,
              img: "../../img/企业使命.png",
              text: "企业使命",
              text1:
                "提供有竞争力的方案和服务为客户创造最大价值，为信息化时代贡献一份力量",
              img1: "../../img/钱.png",
            },
            {
              id: 2,
              img: "../../img/企业理念.png",
              text: "企业理念",
              text1: "以客户满意度为核心价值，以服务效率为核心竞争力",
              img1: "../../img/钱.png",
            },
            {
              id: 3,
              img: "../../img/企业价值观.png",
              text: "企业价值观",

              text1:
                "爱国.敬业诚信.友善.感恩.为顾客创造价值，为员工创造机会为社会创造效益。",

              img1: "../../img/钱.png",
            },
          ]);
          const liuyan = ref([
            { id: 1, icon: "../../img/联系我们.png", text: "联系我们" },
            {
              id: 2,
              icon: "../../img/公司.png",
              text: "山东柏瑞软件科技有限公司",
            },
            { id: 3, icon: "../../img/电话.png", text: "0538-2110108" },
            {
              id: 4,
              icon: "../../img/信件.png",
              text: "WF18661349342@163.COM",
            },
            {
              id: 5,
              icon: "../../img/地址.png",
              text: "济南市长清区崮云湖街道芙蓉路中国创新谷西城软件园A3楼503室",
            },
          ]);
          //测试函数
          //h5页面必须把名称return，vite中不需要（重要区别）
          return {
            photo,
            process,
            liuyan,
          };
        },
      });
      //应用vue（就是挂载在上面ID绑定的元素上）
      demo1.mount("#demo1");

      // 轮播图
      var mySwiper = new Swiper(".swiper", {
        autoplay: {
          delay: 2000,
        },
        loop: true, //循环模式选项// 如果需要滚动条
        pagination: {
          el: ".swiper-pagination",
        },
      });
    </script>
  </body>
</html>
